<template>
<view class="tab-bar">
	<image class="tab-bar-border" src="/static/custom-bg.png"></image>
  <view class="tab-bar-item" v-for="(item,index) in list" @click="switchTab(item,index)">
  	<image class="tab-bar-item-img" v-if="selected != index" :src="item.iconPath"></image>
    <image class="tab-bar-item-img" v-if="selected == index" :src="item.selectedIconPath"></image>
		<view class="tab-bar-item-view" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>  
  </view>  
</view>
</template>

<script>
export default {
	name:"TabBar",
  props: {
    selected: {
      type: Number,
      default: 0
    }      
  },  
	data() {
		return {
			color: '#B5B6D6',
			selectedColor: '#1D3EF0',
			list:[
				{
					pagePath:'/pages/index/index',
					iconPath:'/static/index.png',
					selectedIconPath:'/static/index-cur.png',
					text:'首页'
				},
				{
					pagePath:'/pages/material/material',
					iconPath:'/static/material.png',
					selectedIconPath:'/static/material-cur.png',
					text:'材素'
				},
				{
					"pagePath": "",
					"iconPath": "",
					"selectedIconPath": "",
					"text": "上传"
				},				
				{
					pagePath:'/pages/template/template',
					iconPath:'/static/template.png',
					selectedIconPath:'/static/template-cur.png',
					text:'模板'
				},
				{
					pagePath:'/pages/my/my',
					iconPath:'/static/my.png',
					selectedIconPath:'/static/my-cur.png',
					text: "我的"
				}												
			]
		};
	},
  options:{
    virtualHost: true
  },  
  created(){
    console.log('footer-created')
  },
  methods: {
    switchTab(item,index){
			this.$emit('update:selected',index)
      //this.selected = index;
      //uni.switchTab({url: item.pagePath});
    }
	}	
}
</script>

<style>
.tab-bar {width:100%;  height: 63px; position:relative; z-index: 20;  bottom:0; display:flex; padding-bottom: env(safe-area-inset-bottom)}
.tab-bar-border {position:absolute; width:750rpx; height:184rpx; top:-27rpx;left:0;}
.tab-bar-item {position:relative;z-index:22;flex: 1;text-align: center;display: flex;justify-content: center;align-items: center; flex-direction: column;}
.tab-bar-item-img{width: 27px; height: 27px;  margin-top:-15px;}
.tab-bar-item-view {position:absolute; top:38px; font-size: 11px;}
</style>